---
menu: API
title: '@loadable/component'
order: 10
---

# @loadable/component

## loadable

Create a loadable component.

| Arguments                  | Description                                                          |
| -------------------------- | -------------------------------------------------------------------- |
| `loadFn`                   | The function call to load the component.                             |
| `options`                  | Optional options.                                                    |
| `options.resolveComponent` | Function to resolve the imported component from the imported module. |
| `options.fallback`         | Fallback displayed during the loading.                               |
| `options.ssr`              | If `false`, it will not be processed server-side. Default to `true`. |
| `options.cacheKey`         | Cache key function (see [dynamic import](/docs/dynamic-import/))     |

```js
import loadable from '@loadable/component'

const OtherComponent = loadable(() => import('./OtherComponent'))
```

### `options.resolveComponent`

This is a function that receives the imported module (what the `import()` call resolves to) and the props, and returns the component.

The default value assumes that the component is exported as a default export.
It can be customized to make a loadable component where the imported component is not the default export, or even where a different export is chosen depending on the props.
For example:

```js
// components.js

export const Apple = () => 'Apple!'
export const Orange = () => 'Orange!'
```

```js
// loadable.js

const LoadableApple = loadable(() => import('./components'), {
  resolveComponent: components => components.Apple,
})

const LoadableOrange = loadable(() => import('./components'), {
  resolveComponent: components => components.Orange,
})

const LoadableFruit = loadable(() => import('./components'), {
  resolveComponent: (components, props) => components[props.fruit],
})
```

**Note:** The default `resolveComponent` breaks Typescript type inference due to CommonJS compatibility.
To avoid this, you can specify `resolveComponent` as `(imported) => imported.default`.
This requires that the imported components have ES6/Harmony exports.

## lazy

Create a loadable component "Suspense" ready.

| Arguments | Description                              |
| --------- | ---------------------------------------- |
| `loadFn`  | The function call to load the component. |

```js
import { lazy } from '@loadable/component'

const OtherComponent = lazy(() => import('./OtherComponent'))
```

## LoadableComponent

A component created using `loadable` or `lazy`.

| Props      | Description                                       |
| ---------- | ------------------------------------------------- |
| `fallback` | Fallback displayed during the loading.            |
| `...`      | Props are forwarded as first argument of `loadFn` |

## LoadableComponent.preload

Triggers the loading of a component.

| Arguments | Description                        |
| --------- | ---------------------------------- |
| `args`    | Props passed to the load function. |

```js
import loadable from '@loadable/component'

const OtherComponent = loadable(() => import('./OtherComponent'))

OtherComponent.preload()
```

> This method does not return a Promise intentionally. Use `load` if you need to wait for the component to be loaded.

## LoadableComponent.load

Force the loading of a component synchronously, returns a Promise.

| Arguments | Description                        |
| --------- | ---------------------------------- |
| `args`    | Props passed to the load function. |

```js
import loadable from '@loadable/component'

const OtherComponent = loadable(() => import('./OtherComponent'))

OtherComponent.load().then(() => {
  console.log('Component is loaded!')
})
```

> If you don't need to know when the component will be loaded, you should use `preload` instead.

## loadable.lib

Create a loadable library.

| Arguments                  | Description                                                          |
| -------------------------- | -------------------------------------------------------------------- |
| `loadFn`                   | The function call to load the component.                             |
| `options`                  | Optional options.                                                    |
| `options.resolveComponent` | Function to resolve the imported component from the imported module. |
| `options.fallback`         | Fallback displayed during the loading.                               |
| `options.ssr`              | If `false`, it will not be processed server-side. Default to `true`. |
| `options.cacheKey`         | Cache key function (see [dynamic import](/docs/dynamic-import))      |

```js
import loadable from '@loadable/component'

const Moment = loadable.lib(() => import('moment'))
```

## lazy.lib

Create a loadable library "Suspense" ready.

| Arguments | Description                              |
| --------- | ---------------------------------------- |
| `loadFn`  | The function call to load the component. |

```js
import { lazy } from '@loadable/component'

const Moment = lazy.lib(() => import('moment'))
```

## LoadableLibrary

A component created using `loadable.lib` or `lazy.lib`.

| Props      | Description                                          |
| ---------- | ---------------------------------------------------- |
| `children` | Function called when the library is loaded.          |
| `ref`      | Accepts a ref, populated when the library is loaded. |
| `fallback` | Fallback displayed during the loading.               |
| `...`      | Props are forwarded as first argument of `loadFn`    |

## loadableReady

Wait for all loadable components to be loaded. This method must only be used with Server Side Rendering, see [Server Side Rendering guide](/docs/server-side-rendering/).

| Arguments                    | Description                                                                               |
| ---------------------------- | ----------------------------------------------------------------------------------------- |
| `done`                       | Function called when all components are loaded.                                           |
| `options`                    | Optional options.                                                                         |
| `options.namespace`          | Namespace of your application (use only if you have several React apps on the same page). |
| `options.chunkLoadingGlobal` | A custom `chunkLoadingGlobal` if set in the Webpack plugin                                |

```js
import { loadableReady } from '@loadable/component'

loadableReady(() => {
  const root = document.getElementById('main')
  hydrate(<App />, root)
})
```
